<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>
<?php $id = base64_decode($_GET[trim(base64_encode("idroom"), '=')]); ?>

<?php
	$paidStatus = array(0 => "Occupier", 1 => "Checkout");
	$data_room = getRoom($id);
	$sql = "SELECT * FROM front_office WHERE idroom = '".$id."' ORDER BY Checkin";
	$query = mysql_query($sql);
?>

<div class="header">
	<span>
		<a href="fo-room-info.php?<?php echo $_SERVER["QUERY_STRING"]; ?>">
			<i class="fa fa-eye"></i> Room Info
		</a>
	</span>
	<span>
		<a href="fo-room-activity-table.php?<?php echo $_SERVER["QUERY_STRING"]; ?>">
			<i class="fa fa-table"></i> Table View
		</a>
	</span>
	<span>
		<a href="fo-room-activity-calendar.php?<?php echo $_SERVER["QUERY_STRING"]; ?>">
			<i class="fa fa-calendar"></i> Calendar View
		</a>
	</span>
	<span class="active">
		<a href="fo-room-activity-graph.php?<?php echo $_SERVER["QUERY_STRING"]; ?>">
			<i class="fa fa-bar-chart-o"></i> Graph View
		</a>
	</span>
</div>

<div class="content row-fluid"> 
	<div class="span12 table-placer">
		<div class="alert alert-info"><h4>Room Activity - <?php echo $data_room["nama"]; ?> | <small>Graph View</small></h4></div>
		<div class="row-fluid index-pos-placer content">
			<form id="formGraph" class="form-inline">
				<fieldset>
					<select id="graph_type">
						<option value="yearview">Year View</option>
						<option value="monthview" data-format="yyyy" data-min-view="years">Month View</option>
						<option value="weekview" data-format="yyyy-m" data-min-view="months">Week View</option>
					</select>
					<input type="text" class="input-medium" placeholder="yyyy-mm-dd" id="datepick" name="datepick" value="" readonly="">
					<button type="submit" class="btn btn-primary f2">Submit (F2)</button>
				</fieldset>
			</form>
			<p id="graphNotification" class="alert alert-error">
				No result, please fix your search query...
			</p>
			<div id="placeholder">
				<figure id="graph"></figure>
			</div>
		</div>
	</div>
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>

<script type="text/javascript">
	$(document).ready(function() {
		var act = $('#graph_type').val();

		$('#datepick').hide();
		$('#graphNotification').hide();

		$('#datepick').datepicker();

		$('#graph_type').change(function(event) {
			/* Act on the event */
			var that = $(this);
			var optionDate = that.find("option:selected");
			act = that.val();
			$('#datepick').hide();
			$('#datepick').datepicker("remove");
			$('#datepick').val("");
			if (that.val() != 'yearview') {
				$('#datepick').show();
				$('#datepick').datepicker({
					format: optionDate.data("format"),
					minViewMode: optionDate.data("min-view"),
					autoclose: true
				});
			}
		});

		$('#formGraph').submit(function(event) {
			/* Act on the event */
			event.preventDefault();
			$('#graphNotification').hide();
			$('body').modalmanager("loading");
			$.post("ajax/json_guest_graph.php", {idroom: "<?php echo $id; ?>", act: act, date: $('#datepick').val()}, function(data, textStatus) {
				$('#graph').empty();
				setTimeout(function(){
					$('body').modalmanager("loading");
				}, 500);
				if (data.length > 0) {
					Morris.Line({
					  element: 'graph',
					  data: data,
					  xkey: 'period',
					  // xLabels: 'second',
					  ykeys: ['amount'],
					  onlyIntegers: true,
					  labels: ['Guest Amount'],
					  grid: true,
					  smooth: false,
					  parseTime: false
					});
				} else {
					$('#graphNotification').show();
				}
			}, "json");
		});
	});
</script>